<template>
  <div class="reports-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">
          <el-icon><DataAnalysis /></el-icon>
          报表分析
        </h1>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>报表分析</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="header-right">
        <el-button-group>
          <el-button @click="refreshData">
            <el-icon><Refresh /></el-icon>
            刷新数据
          </el-button>
          <el-button 
            type="primary" 
            @click="exportReport"
            v-if="authStore.hasPermission(PERMISSIONS.REPORT_VIEW)"
          >
            <el-icon><Download /></el-icon>
            导出报表
          </el-button>
        </el-button-group>
      </div>
    </div>

    <!-- 时间筛选 -->
    <el-card class="filter-card">
      <div class="filter-toolbar">
        <div class="filter-left">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleDateChange"
            style="width: 240px;"
          />
          
          <el-select
            v-model="selectedPeriod"
            placeholder="快速选择"
            @change="handlePeriodChange"
            style="width: 120px; margin-left: 12px;"
          >
            <el-option label="今天" value="today" />
            <el-option label="昨天" value="yesterday" />
            <el-option label="本周" value="thisWeek" />
            <el-option label="上周" value="lastWeek" />
            <el-option label="本月" value="thisMonth" />
            <el-option label="上月" value="lastMonth" />
            <el-option label="本年" value="thisYear" />
          </el-select>
          
          <el-select
            v-model="selectedDepartment"
            placeholder="部门筛选"
            clearable
            @change="handleFilterChange"
            style="width: 150px; margin-left: 12px;"
          >
            <el-option label="全部部门" value="" />
            <el-option label="技术部" value="tech" />
            <el-option label="客服部" value="service" />
            <el-option label="运营部" value="operation" />
          </el-select>
        </div>
        
        <div class="filter-right">
          <el-button @click="resetFilters">重置筛选</el-button>
          <el-button type="primary" @click="applyFilters">应用筛选</el-button>
        </div>
      </div>
    </el-card>

    <!-- 概览统计 -->
    <div class="overview-stats">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon total">
                <el-icon><Document /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ overviewStats.totalTickets }}</div>
                <div class="stat-label">总工单数</div>
                <div class="stat-change" :class="overviewStats.ticketChange >= 0 ? 'positive' : 'negative'">
                  <el-icon><TrendCharts /></el-icon>
                  {{ Math.abs(overviewStats.ticketChange) }}%
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon resolved">
                <el-icon><Check /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ overviewStats.resolvedTickets }}</div>
                <div class="stat-label">已解决</div>
                <div class="stat-change" :class="overviewStats.resolutionChange >= 0 ? 'positive' : 'negative'">
                  <el-icon><TrendCharts /></el-icon>
                  {{ Math.abs(overviewStats.resolutionChange) }}%
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon pending">
                <el-icon><Clock /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ overviewStats.pendingTickets }}</div>
                <div class="stat-label">待处理</div>
                <div class="stat-change" :class="overviewStats.pendingChange >= 0 ? 'positive' : 'negative'">
                  <el-icon><TrendCharts /></el-icon>
                  {{ Math.abs(overviewStats.pendingChange) }}%
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon time">
                <el-icon><Timer /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ overviewStats.avgResolutionTime }}</div>
                <div class="stat-label">平均解决时间(小时)</div>
                <div class="stat-change" :class="overviewStats.timeChange >= 0 ? 'positive' : 'negative'">
                  <el-icon><TrendCharts /></el-icon>
                  {{ Math.abs(overviewStats.timeChange) }}%
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-section">
      <!-- 工单趋势图 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>工单趋势分析</span>
              <el-button-group>
                <el-button 
                  :type="trendChartType === 'line' ? 'primary' : ''"
                  @click="trendChartType = 'line'"
                >
                  折线图
                </el-button>
                <el-button 
                  :type="trendChartType === 'bar' ? 'primary' : ''"
                  @click="trendChartType = 'bar'"
                >
                  柱状图
                </el-button>
              </el-button-group>
            </div>
          </template>
          <div class="chart-container">
            <TrendChart 
              :data="trendData" 
              :type="trendChartType"
              :loading="loading"
            />
          </div>
        </el-card>
      </el-col>
      
      <!-- 工单状态分布 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>工单状态分布</span>
            </div>
          </template>
          <div class="chart-container">
            <div ref="statusChart" class="chart-placeholder">
              <div v-if="loading" class="loading-placeholder">
                <el-icon class="is-loading"><Loading /></el-icon>
                <span>加载中...</span>
              </div>
              <div v-else class="chart-content">
                <!-- 这里可以集成 ECharts 或其他图表库 -->
                <div class="status-distribution">
                  <div 
                    v-for="item in statusDistribution" 
                    :key="item.status"
                    class="status-item"
                  >
                    <div class="status-info">
                      <div class="status-name">{{ item.name }}</div>
                      <div class="status-count">{{ item.count }}</div>
                    </div>
                    <div class="status-bar">
                      <div 
                        class="status-fill" 
                        :style="{ 
                          width: item.percentage + '%',
                          backgroundColor: item.color 
                        }"
                      ></div>
                    </div>
                    <div class="status-percentage">{{ item.percentage }}%</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第二行图表 -->
    <el-row :gutter="20" class="charts-section">
      <!-- 优先级分布 -->
      <el-col :span="8">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>优先级分布</span>
            </div>
          </template>
          <div class="chart-container">
            <div class="priority-distribution">
              <div 
                v-for="item in priorityDistribution" 
                :key="item.priority"
                class="priority-item"
              >
                <div class="priority-icon" :style="{ backgroundColor: item.color }">
                  <el-icon><Flag /></el-icon>
                </div>
                <div class="priority-info">
                  <div class="priority-name">{{ item.name }}</div>
                  <div class="priority-count">{{ item.count }} 个</div>
                </div>
                <div class="priority-percentage">{{ item.percentage }}%</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 部门工单统计 -->
      <el-col :span="8">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>部门工单统计</span>
            </div>
          </template>
          <div class="chart-container">
            <div class="department-stats">
              <div 
                v-for="item in departmentStats" 
                :key="item.department"
                class="department-item"
              >
                <div class="department-name">{{ item.name }}</div>
                <div class="department-numbers">
                  <div class="number-item">
                    <span class="label">总数:</span>
                    <span class="value">{{ item.total }}</span>
                  </div>
                  <div class="number-item">
                    <span class="label">已解决:</span>
                    <span class="value resolved">{{ item.resolved }}</span>
                  </div>
                  <div class="number-item">
                    <span class="label">待处理:</span>
                    <span class="value pending">{{ item.pending }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 客服工作量统计 -->
      <el-col :span="8">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>客服工作量统计</span>
            </div>
          </template>
          <div class="chart-container">
            <div class="agent-workload">
              <div 
                v-for="item in agentWorkload" 
                :key="item.agentId"
                class="agent-item"
              >
                <div class="agent-info">
                  <div class="agent-name">{{ item.name }}</div>
                  <div class="agent-role">{{ item.role }}</div>
                </div>
                <div class="workload-bar">
                  <div class="workload-fill" :style="{ width: item.workloadPercentage + '%' }"></div>
                </div>
                <div class="workload-count">{{ item.ticketCount }} 个工单</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详细数据表格 -->
    <el-card class="data-table-card">
      <template #header>
        <div class="card-header">
          <span>详细数据</span>
          <el-button-group>
            <el-button 
              :type="tableView === 'summary' ? 'primary' : ''"
              @click="tableView = 'summary'"
            >
              汇总数据
            </el-button>
            <el-button 
              :type="tableView === 'detailed' ? 'primary' : ''"
              @click="tableView = 'detailed'"
            >
              详细数据
            </el-button>
          </el-button-group>
        </div>
      </template>
      
      <!-- 汇总数据表格 -->
      <el-table
        v-if="tableView === 'summary'"
        :data="summaryData"
        v-loading="loading"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="date" label="日期" width="120" />
        <el-table-column prop="totalTickets" label="总工单数" width="100" />
        <el-table-column prop="newTickets" label="新增工单" width="100" />
        <el-table-column prop="resolvedTickets" label="已解决" width="100" />
        <el-table-column prop="pendingTickets" label="待处理" width="100" />
        <el-table-column prop="avgResolutionTime" label="平均解决时间(小时)" width="150" />
        <el-table-column prop="resolutionRate" label="解决率" width="100">
          <template #default="{ row }">
            <el-tag :type="row.resolutionRate >= 80 ? 'success' : row.resolutionRate >= 60 ? 'warning' : 'danger'">
              {{ row.resolutionRate }}%
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 详细数据表格 -->
      <el-table
        v-else
        :data="detailedData"
        v-loading="loading"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="ticketId" label="工单ID" width="100" />
        <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)" size="small">
              {{ translateStatus(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="priority" label="优先级" width="100">
          <template #default="{ row }">
            <el-tag :type="getPriorityType(row.priority)" size="small">
              {{ translatePriority(row.priority) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="assignee" label="负责人" width="120" />
        <el-table-column prop="createdAt" label="创建时间" width="160" />
        <el-table-column prop="resolvedAt" label="解决时间" width="160" />
        <el-table-column prop="resolutionTime" label="解决时长(小时)" width="120" />
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="tableView === 'summary' ? summaryData.length : detailedData.length"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, computed, onMounted, reactive } from 'vue'
import { useAuthStore, PERMISSIONS } from '../store/auth'
import { useTicketsStore } from '../store/tickets'
import { useUserStore } from '../store/user'
import TrendChart from '../components/TrendChart.vue'
import { ElMessage } from 'element-plus'
import { 
  DataAnalysis, Refresh, Download, Document, Check, Clock, Timer,
  TrendCharts, Loading, Flag
} from '@element-plus/icons-vue'

export default {
  name: 'Reports',
  components: {
    TrendChart,
    DataAnalysis, Refresh, Download, Document, Check, Clock, Timer,
    TrendCharts, Loading, Flag
  },
  setup() {
    const authStore = useAuthStore()
    const ticketsStore = useTicketsStore()
    const userStore = useUserStore()

    // 响应式数据
    const loading = ref(false)
    const dateRange = ref([])
    const selectedPeriod = ref('thisMonth')
    const selectedDepartment = ref('')
    const trendChartType = ref('line')
    const tableView = ref('summary')
    const currentPage = ref(1)
    const pageSize = ref(20)

    // 概览统计数据
    const overviewStats = reactive({
      totalTickets: 0,
      resolvedTickets: 0,
      pendingTickets: 0,
      avgResolutionTime: 0,
      ticketChange: 0,
      resolutionChange: 0,
      pendingChange: 0,
      timeChange: 0
    })

    // 图表数据
    const trendData = ref([])
    const statusDistribution = ref([])
    const priorityDistribution = ref([])
    const departmentStats = ref([])
    const agentWorkload = ref([])
    const summaryData = ref([])
    const detailedData = ref([])

    // 计算属性
    const paginatedSummaryData = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value
      const end = start + pageSize.value
      return summaryData.value.slice(start, end)
    })

    const paginatedDetailedData = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value
      const end = start + pageSize.value
      return detailedData.value.slice(start, end)
    })

    // 方法
    const refreshData = async () => {
      loading.value = true
      try {
        await Promise.all([
          loadOverviewStats(),
          loadTrendData(),
          loadStatusDistribution(),
          loadPriorityDistribution(),
          loadDepartmentStats(),
          loadAgentWorkload(),
          loadSummaryData(),
          loadDetailedData()
        ])
        ElMessage.success('数据刷新成功')
      } catch (error) {
        ElMessage.error('数据刷新失败：' + error.message)
      } finally {
        loading.value = false
      }
    }

    const loadOverviewStats = async () => {
      // 模拟数据加载
      await new Promise(resolve => setTimeout(resolve, 500))
      
      Object.assign(overviewStats, {
        totalTickets: 1256,
        resolvedTickets: 1089,
        pendingTickets: 167,
        avgResolutionTime: 24.5,
        ticketChange: 12.5,
        resolutionChange: 8.3,
        pendingChange: -15.2,
        timeChange: -5.7
      })
    }

    const loadTrendData = async () => {
      // 模拟趋势数据
      const days = 30
      const data = []
      for (let i = days - 1; i >= 0; i--) {
        const date = new Date()
        date.setDate(date.getDate() - i)
        data.push({
          date: date.toISOString().split('T')[0],
          total: Math.floor(Math.random() * 50) + 20,
          resolved: Math.floor(Math.random() * 40) + 15,
          pending: Math.floor(Math.random() * 20) + 5
        })
      }
      trendData.value = data
    }

    const loadStatusDistribution = async () => {
      statusDistribution.value = [
        { status: 'OPEN', name: '待处理', count: 167, percentage: 13.3, color: '#f56c6c' },
        { status: 'IN_PROGRESS', name: '处理中', count: 89, percentage: 7.1, color: '#409eff' },
        { status: 'PENDING', name: '挂起', count: 23, percentage: 1.8, color: '#e6a23c' },
        { status: 'RESOLVED', name: '已解决', count: 1089, percentage: 86.7, color: '#67c23a' },
        { status: 'CLOSED', name: '已关闭', count: 45, percentage: 3.6, color: '#909399' }
      ]
    }

    const loadPriorityDistribution = async () => {
      priorityDistribution.value = [
        { priority: 'HIGH', name: '高', count: 156, percentage: 12.4, color: '#f56c6c' },
        { priority: 'MEDIUM', name: '中', count: 789, percentage: 62.8, color: '#e6a23c' },
        { priority: 'LOW', name: '低', count: 311, percentage: 24.8, color: '#67c23a' }
      ]
    }

    const loadDepartmentStats = async () => {
      departmentStats.value = [
        { department: 'tech', name: '技术部', total: 456, resolved: 398, pending: 58 },
        { department: 'service', name: '客服部', total: 523, resolved: 467, pending: 56 },
        { department: 'operation', name: '运营部', total: 277, resolved: 224, pending: 53 }
      ]
    }

    const loadAgentWorkload = async () => {
      agentWorkload.value = [
        { agentId: 1, name: '客服A', role: '高级客服', ticketCount: 45, workloadPercentage: 85 },
        { agentId: 2, name: '客服B', role: '客服', ticketCount: 38, workloadPercentage: 72 },
        { agentId: 3, name: '客服C', role: '客服', ticketCount: 32, workloadPercentage: 60 },
        { agentId: 4, name: '客服D', role: '初级客服', ticketCount: 28, workloadPercentage: 53 }
      ]
    }

    const loadSummaryData = async () => {
      const data = []
      for (let i = 29; i >= 0; i--) {
        const date = new Date()
        date.setDate(date.getDate() - i)
        data.push({
          date: date.toISOString().split('T')[0],
          totalTickets: Math.floor(Math.random() * 50) + 20,
          newTickets: Math.floor(Math.random() * 30) + 10,
          resolvedTickets: Math.floor(Math.random() * 40) + 15,
          pendingTickets: Math.floor(Math.random() * 20) + 5,
          avgResolutionTime: (Math.random() * 48 + 12).toFixed(1),
          resolutionRate: Math.floor(Math.random() * 30 + 70)
        })
      }
      summaryData.value = data
    }

    const loadDetailedData = async () => {
      const data = []
      for (let i = 0; i < 100; i++) {
        const createdDate = new Date()
        createdDate.setDate(createdDate.getDate() - Math.floor(Math.random() * 30))
        
        const resolvedDate = new Date(createdDate)
        resolvedDate.setHours(resolvedDate.getHours() + Math.floor(Math.random() * 72))
        
        data.push({
          ticketId: i + 1,
          title: `工单标题 ${i + 1}`,
          status: ['OPEN', 'IN_PROGRESS', 'RESOLVED', 'CLOSED'][Math.floor(Math.random() * 4)],
          priority: ['HIGH', 'MEDIUM', 'LOW'][Math.floor(Math.random() * 3)],
          assignee: `客服${String.fromCharCode(65 + Math.floor(Math.random() * 4))}`,
          createdAt: createdDate.toISOString(),
          resolvedAt: resolvedDate.toISOString(),
          resolutionTime: ((resolvedDate - createdDate) / (1000 * 60 * 60)).toFixed(1)
        })
      }
      detailedData.value = data
    }

    const handleDateChange = () => {
      refreshData()
    }

    const handlePeriodChange = (period) => {
      const today = new Date()
      const start = new Date()
      
      switch (period) {
        case 'today':
          start.setHours(0, 0, 0, 0)
          break
        case 'yesterday':
          start.setDate(today.getDate() - 1)
          start.setHours(0, 0, 0, 0)
          today.setDate(today.getDate() - 1)
          today.setHours(23, 59, 59, 999)
          break
        case 'thisWeek':
          start.setDate(today.getDate() - today.getDay())
          start.setHours(0, 0, 0, 0)
          break
        case 'lastWeek':
          start.setDate(today.getDate() - today.getDay() - 7)
          start.setHours(0, 0, 0, 0)
          today.setDate(today.getDate() - today.getDay())
          today.setHours(23, 59, 59, 999)
          break
        case 'thisMonth':
          start.setDate(1)
          start.setHours(0, 0, 0, 0)
          break
        case 'lastMonth':
          start.setMonth(today.getMonth() - 1, 1)
          start.setHours(0, 0, 0, 0)
          today.setDate(0)
          today.setHours(23, 59, 59, 999)
          break
        case 'thisYear':
          start.setMonth(0, 1)
          start.setHours(0, 0, 0, 0)
          break
      }
      
      dateRange.value = [start, today]
      refreshData()
    }

    const handleFilterChange = () => {
      refreshData()
    }

    const resetFilters = () => {
      dateRange.value = []
      selectedPeriod.value = 'thisMonth'
      selectedDepartment.value = ''
      handlePeriodChange('thisMonth')
    }

    const applyFilters = () => {
      refreshData()
    }

    const exportReport = () => {
      ElMessage.info('导出功能开发中...')
    }

    const handleSizeChange = (size) => {
      pageSize.value = size
      currentPage.value = 1
    }

    const handleCurrentChange = (page) => {
      currentPage.value = page
    }

    // 工具方法
    const getStatusType = (status) => {
      const types = {
        OPEN: 'warning',
        IN_PROGRESS: 'primary',
        PENDING: 'info',
        RESOLVED: 'success',
        CLOSED: 'info'
      }
      return types[status] || 'info'
    }

    const getPriorityType = (priority) => {
      const types = {
        HIGH: 'danger',
        MEDIUM: 'warning',
        LOW: 'info'
      }
      return types[priority] || 'info'
    }

    const translateStatus = (status) => {
      const statusMap = {
        OPEN: '待处理',
        IN_PROGRESS: '处理中',
        PENDING: '挂起',
        RESOLVED: '已解决',
        CLOSED: '已关闭'
      }
      return statusMap[status] || status
    }

    const translatePriority = (priority) => {
      const priorityMap = {
        HIGH: '高',
        MEDIUM: '中',
        LOW: '低'
      }
      return priorityMap[priority] || priority
    }

    // 生命周期
    onMounted(async () => {
      await refreshData()
    })

    return {
      loading,
      dateRange,
      selectedPeriod,
      selectedDepartment,
      trendChartType,
      tableView,
      currentPage,
      pageSize,
      overviewStats,
      trendData,
      statusDistribution,
      priorityDistribution,
      departmentStats,
      agentWorkload,
      summaryData,
      detailedData,
      paginatedSummaryData,
      paginatedDetailedData,
      refreshData,
      handleDateChange,
      handlePeriodChange,
      handleFilterChange,
      resetFilters,
      applyFilters,
      exportReport,
      handleSizeChange,
      handleCurrentChange,
      getStatusType,
      getPriorityType,
      translateStatus,
      translatePriority,
      authStore,
      PERMISSIONS
    }
  }
}
</script>

<style scoped>
.reports-container {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.filter-card {
  margin-bottom: 20px;
  border-radius: 12px;
}

.filter-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-left {
  display: flex;
  align-items: center;
}

.overview-stats {
  margin-bottom: 20px;
}

.stat-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}

.stat-icon.total { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.stat-icon.resolved { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.stat-icon.pending { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.stat-icon.time { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 4px;
}

.stat-change {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
}

.stat-change.positive {
  color: #67c23a;
}

.stat-change.negative {
  color: #f56c6c;
}

.charts-section {
  margin-bottom: 20px;
}

.chart-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 300px;
  padding: 20px;
}

.chart-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #909399;
}

.chart-content {
  width: 100%;
  height: 100%;
}

.status-distribution {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-info {
  width: 80px;
}

.status-name {
  font-size: 14px;
  color: #303133;
  margin-bottom: 4px;
}

.status-count {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.status-bar {
  flex: 1;
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.status-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.status-percentage {
  width: 50px;
  text-align: right;
  font-size: 14px;
  color: #606266;
}

.priority-distribution {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.priority-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.priority-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.priority-info {
  flex: 1;
}

.priority-name {
  font-size: 14px;
  color: #303133;
  margin-bottom: 4px;
}

.priority-count {
  font-size: 12px;
  color: #909399;
}

.priority-percentage {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.department-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.department-item {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.department-name {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.department-numbers {
  display: flex;
  justify-content: space-between;
}

.number-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.number-item .label {
  font-size: 12px;
  color: #909399;
}

.number-item .value {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.number-item .value.resolved {
  color: #67c23a;
}

.number-item .value.pending {
  color: #f56c6c;
}

.agent-workload {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.agent-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.agent-info {
  width: 80px;
}

.agent-name {
  font-size: 14px;
  color: #303133;
  margin-bottom: 4px;
}

.agent-role {
  font-size: 12px;
  color: #909399;
}

.workload-bar {
  flex: 1;
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.workload-fill {
  height: 100%;
  background: linear-gradient(90deg, #409eff 0%, #67c23a 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.workload-count {
  width: 80px;
  text-align: right;
  font-size: 14px;
  color: #606266;
}

.data-table-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .reports-container {
    padding: 12px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .filter-toolbar {
    flex-direction: column;
    gap: 12px;
  }
  
  .filter-left {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .charts-section .el-col {
    margin-bottom: 20px;
  }
  
  .chart-container {
    height: 250px;
    padding: 16px;
  }
}
</style>
